<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style >
      .fu{
        width: 400px;
        height: 400px;
        background: skyblue;
      }
      .zi{
        width: 200px;
        height: 200px;
        background: darkgoldenrod;
      }
      #big{
        width: 500px;
        height: 500px;
        background: darkcyan;
      }
      #small{
        width: 200px;
        height: 200px;
        background: darkgreen;
      }
  </style>
</head>
<body>
  <div id="app">
    <div @click="fu()" class="fu">
      <!-- 阻止事件冒泡的修饰符 @事件.stop="函数" -->
      <div @click.stop="zi($event)" class="zi"></div>
    </div> 
          <!-- 阻止浏览器的默认行为，在事件后面加修饰符 .prevent  -->
      <form @submit.prevent="toSub">

          <input type="submit">
      </form>
      <!-- self  只有本身元素触发，子元素不触发事件-->
      <div id="big" @click.self="kill">
        <div id="small">

        </div>
      </div>
      <!-- .once 让事件函数只触发一次 -->
      <div style="font-size: 30px;" @click.once="myonce">只触发一次</div>
      <!-- .passive 增加性能 
      在一些特殊的事件 scroll reszie  -->
      <div id="box" style="width: 220px;height: 200px;overflow: auto;" @scroll.passive="myscroll($event)">
          <div style="width: 620px;height: 800px;
          background: darkcyan">
          
        </div>
      </div>
      <!-- .capture 将事件模式 调整为捕获
      从外向内触发事件 先触发父元素事件，在触发的事件 -->
  </div>
  <script src="./vue.js"></script>
  <script>
    // vue的事件修饰符

    new  Vue({
      el:"#app",
      data(){
        return {
          flag:false
        }
      },
      methods: {
        fu(){
          alert("父函数触发了")
        },
        zi(e){

          alert("子函数触发了")
        },
        toSub(){
          console.log("阻止了默认提交，我在函数里提交发起请求")
        },
        kill(){
          alert("只有自身才触发，子元素不触发")
        },
        myonce(){
          console.log("触发一次")
        },
        myscroll(e){
          console.log(e.target.scrollTop)
        }
      }
    })




  </script>
</body> 
</html>